{include file='index/header.html'}

<!-- 主体 -->
<div class="container">
    <div class="row">
        <!-- 左侧列表 -->
        <div class="col-md-8">

            <!-- 内容详情 -->
            {assign var = 'zero' value = 0}
            <div class="panel panel-default">
                <div class="panel-body">
                    <h1 class="text-center" id="title">{if $article}{$article.title}{else}{$tran.untitled}{/if}</h1>
                    <br>
                    <!-- 元信息 -->
                    <div class="panel panel-default">
                        <div class="panel-body">
                            <div class="pull-left">
                                <span class="glyphicon glyphicon-time text-muted" aria-hidden="true"></span>
                                {if $article}{$article.create_at|date:m/d/y}{else}{$zero|date:m/d/y}{/if} &nbsp;&nbsp;
                                <span class="glyphicon glyphicon-eye-open text-muted" aria-hidden="true"></span>
                                <span class="post-views">{if $article}{$article.views}{else}{$zero}{/if}</span> &nbsp;&nbsp;
                                <span class="glyphicon glyphicon-folder-open text-muted" aria-hidden="true"></span>&nbsp;
                                {if $category}<a href="{$category.link}" title="{$category.name|strip_tags}">{$category.name}</a>{else}{$tran.uncategoried}{/if} &nbsp;&nbsp;
                            </div>
                            <div class="pull-right">
                                <svg class="glyphicon" version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 32 32" fill="#777777">
                                    <path d="M28 12c-1.1 0-2 0.9-2 2v8c0 1.1 0.9 2 2 2s2-0.9 2-2v-8c0-1.1-0.9-2-2-2zM4 12c-1.1 0-2 0.9-2 2v8c0 1.1 0.9 2 2 2s2-0.9 2-2v-8c0-1.1-0.9-2-2-2zM7 23c0 1.657 1.343 3 3 3v0 4c0 1.1 0.9 2 2 2s2-0.9 2-2v-4h4v4c0 1.1 0.9 2 2 2s2-0.9 2-2v-4c1.657 0 3-1.343 3-3v-11h-18v11z"></path>
                                    <path d="M24.944 10c-0.304-2.746-1.844-5.119-4.051-6.551l1.001-2.001c0.247-0.494 0.047-1.095-0.447-1.342s-1.095-0.047-1.342 0.447l-1.004 2.009-0.261-0.104c-0.893-0.297-1.848-0.458-2.84-0.458s-1.947 0.161-2.84 0.458l-0.261 0.104-1.004-2.009c-0.247-0.494-0.848-0.694-1.342-0.447s-0.694 0.848-0.447 1.342l1.001 2.001c-2.207 1.433-3.747 3.805-4.051 6.551v1h17.944v-1h-0.056zM13 8c-0.552 0-1-0.448-1-1s0.447-0.999 0.998-1c0.001 0 0.002 0 0.003 0s0.001-0 0.002-0c0.551 0.001 0.998 0.448 0.998 1s-0.448 1-1 1zM19 8c-0.552 0-1-0.448-1-1s0.446-0.999 0.998-1c0 0 0.001 0 0.002 0s0.002-0 0.003-0c0.551 0.001 0.998 0.448 0.998 1s-0.448 1-1 1z"></path>
                                </svg>
                                <a href="{$site_url}/static/upload/yesu.co.apk" download="yesu.co.apk" role="button" title="Android {$tran.custom}">{$tran.custom}</a> &nbsp;&nbsp;
                                <svg class="glyphicon" version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 32 32" fill="#777777">
                                    <path d="M0 2v20h32v-20h-32zM30 20h-28v-16h28v16zM21 24h-10l-1 4-2 2h16l-2-2z"></path>
                                </svg>
                                <a href="{$site_url}/desktop.html" download="{$setting.webName|strip_tags}.html" role="button" title="PC {$tran.custom}">{$tran.custom}</a>
                            </div>
                        </div>
                    </div>
                    <!-- 工具条 -->
                    <div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
                        <!-- 语音播报 -->
                        {if isset($setting['voice_read']) && $setting.voice_read == '1'}
                        <div class="btn-group btn-group-lg pull-left" role="group" aria-label="First group">
                            <button type="button" class="btn btn-default" disabled="disabled" aria-label="Left Align">
                                <span class="glyphicon glyphicon-headphones" aria-hidden="true"></span>
                            </button>
                            <button type="button" class="btn btn-default btn-play"{if !$voice} disabled="disabled"{/if} aria-label="Left Align">
                                <span class="glyphicon glyphicon-play" aria-hidden="true"></span>
                            </button>
                        </div>
                        {else}
                        <div class="btn-group btn-group-lg pull-left" role="group" aria-label="First group">
                            <a href="{$site_url}/app.html" download="H5{$setting.webName|strip_tags}.html" role="button" title="H5 {$tran.custom}" class="btn btn-default" aria-label="Left Align">
                                <span class="glyphicon glyphicon-phone" aria-hidden="true"></span> H5 {$tran.custom}
                            </a>
                        </div>
                        {/if}
                        <!-- 字号放大缩小 -->
                        <div class="btn-group btn-group-lg pull-right ignore" role="group" aria-label="Second group">
                            <button type="button" class="btn btn-default font-zoom" data-size="bigger" aria-label="Right Align">
                                A <sup>+</sup>
                            </button>
                            <button type="button" class="btn btn-default font-zoom" data-size="smaller" aria-label="Right Align">
                                A <sup>-</sup>
                            </button>
                        </div>
                    </div>
                    <div id="loading"></div>
                    <!-- 内容区 -->
                    <div class="entry-content">
                        {if $article && $article.description && 0}
                        <p class="lead">{$article.description}</p>
                        {/if}
                        {if $article}{$article.content}{else}{$tran.no_content}{/if}
                    </div>
                    <br>
                    <!-- 分享按钮 -->
                    <div class="text-center">
                        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 32 32">
                            <path d="M27 22c-1.411 0-2.685 0.586-3.594 1.526l-13.469-6.734c0.041-0.258 0.063-0.522 0.063-0.791s-0.022-0.534-0.063-0.791l13.469-6.734c0.909 0.94 2.183 1.526 3.594 1.526 2.761 0 5-2.239 5-5s-2.239-5-5-5-5 2.239-5 5c0 0.269 0.022 0.534 0.063 0.791l-13.469 6.734c-0.909-0.94-2.183-1.526-3.594-1.526-2.761 0-5 2.239-5 5s2.239 5 5 5c1.411 0 2.685-0.586 3.594-1.526l13.469 6.734c-0.041 0.258-0.063 0.522-0.063 0.791 0 2.761 2.239 5 5 5s5-2.239 5-5c0-2.761-2.239-5-5-5z" fill="#777777"></path>
                        </svg>&nbsp;
                        <span id="social-share" data-initialized="true" data-image="{$article.cover}">
                            <a href="javascript:;" rel="nofollow" title="Share weibo" class="social-share-icon icon-weibo"></a>
                            <a href="javascript:;" rel="nofollow" title="Share qq" class="social-share-icon icon-qq"></a>
                            <a href="javascript:;" rel="nofollow" title="Share wechat" class="social-share-icon icon-wechat"></a>
                            <a href="javascript:;" rel="nofollow" title="Share douban" class="social-share-icon icon-douban"></a>
                            <a href="javascript:;" rel="nofollow" title="Share qzone" class="social-share-icon icon-qzone"></a>
                            <a href="javascript:;" rel="nofollow" title="Share linkedin" class="social-share-icon icon-linkedin"></a>
                            <a href="javascript:;" rel="nofollow" title="Share facebook" class="social-share-icon icon-facebook"></a>
                            <a href="javascript:;" rel="nofollow" title="Share twitter" class="social-share-icon icon-twitter"></a>
                            <a href="javascript:;" rel="nofollow" title="Share google" class="social-share-icon icon-google"></a>
                        </span>
                    </div>
                    <br>
                    <!-- 下载内容 -->
                    <div class="text-center">
                        <div class="btn-group">
                            <a type="button" class="btn btn-info{if !$download} btn-download{/if}" aria-label="Download" href="{if $download}{$download}{else}javascript:;{/if}" title="{$tran.download_content}"{if $download} onclick="javascript:this.setAttribute('download', 'ID{$article.id|modifier:str_pad(7, \'0\', STR_PAD_LEFT)}-{$lang}-'+document.getElementById('title').innerText.split(/\s+/).join('-')+'.html');"{/if}><span class="glyphicon glyphicon-download-alt" aria-hidden="true"></span> {$tran.download_content}</a>
                        </div>
                        <div class="btn-group">
                            <button type="button" class="btn btn-warning btn-favorite" aria-label="Favorite" title="{$tran.favorite_article}"><span class="glyphicon glyphicon-star-empty" aria-hidden="true"></span> {$tran.favorite_article}</button>
                        </div>
                    </div>
                    <br>
                    <!-- 转载申明 -->
                    <div class="well well-sm text-muted">
                        {$tran.copyr_info}<br>
                        {$tran.copyr_address}：{if $article}{$article.link}{else}{$tran.no_address}{/if}
                    </div>
                    <!-- 点赞 -->
                    <button type="button" class="btn btn-success{if $login} btn-likes{else} login{/if}">
                        <span class="glyphicon glyphicon-thumbs-up" aria-hidden="true"></span>
                        {$tran.article_useful}
                    </button>
                    <button type="button" class="btn btn-link text-primary" disabled>
                        <span class="glyphicon glyphicon-fire" aria-hidden="true"></span>
                        <span class="post-likes">{if $article}{$article.likes}{else}{$zero}{/if}</span> {$tran.people_likes}
                    </button>
                    <!-- 上一页/下一页 -->
                    <ul class="pager">
                        <li class="previous{if !$main.prev} disabled{/if}">
                            {if $main.prev}
                            <a href="{$main.prev.link}"><span aria-hidden="true">&larr;</span> Older</a>
                            {else}
                            <span aria-hidden="true">&larr; {$tran.nothing}</span>
                            {/if}
                        </li>
                        <li class="next{if !$main.next} disabled{/if}">
                            {if $main.next}
                            <a href="{$main.next.link}">Newer <span aria-hidden="true">&rarr;</span></a>
                            {else}
                            <span aria-hidden="true">{$tran.nothing} &rarr;</span>
                            {/if}
                        </li>
                    </ul>
                    <!-- 内容标签 -->
                    {if $main.tags}
                    <hr />
                    <span class="glyphicon glyphicon-tags text-muted" aria-hidden="true"></span> &nbsp;
                    {foreach from="$main.tags" item="item" name="item"}
                    {if !$smarty.foreach.item.first}, {/if}<a href="{$item.link}" title="{$item.name|strip_tags}">{$item.name}</a>
                    {/foreach}
                    {/if}
                </div>
            </div>

            <!-- 相关文章 -->
            {if $main.related}
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">{$tran.related_articles}</h3>
                </div>
                <div class="panel-body">
                    <!-- 图文卡片 -->
                    <div class="row">
                        <!-- 卡片循环 -->
                        {foreach from="$main.related" item="item"}
                        <div class="col-sm-4">
                            <div class="thumbnail">
                                <a href="{$item.link}" title="{$item.title|strip_tags}">
                                    <img style="width:100%;height:95px;background-color:#f1f1f1;"
                                        src="{if (isset($setting['cdn_speed']) && $setting.cdn_speed == '1') || !$item.cover}{else}{$item.cover}{/if}"
                                        data-src="{if $item.cover}{$item.cover}{else}{/if}"
                                        alt="{$item.title|strip_tags}"
                                        title="{$item.title|strip_tags}" />
                                </a>
                                <div class="caption">
                                    <h3 style="margin:0;font-size:14.7px;">
                                        <a href="{$item.link}" title="{$item.title|strip_tags}">{$item.title}</a>
                                    </h3>
                                </div>
                            </div>
                        </div>
                        {/foreach}
                        <!-- 卡片循环end -->
                    </div>
                    <!-- 图片卡片end -->
                </div>
            </div>
            {/if}
            <!-- 相关文章end -->

            <!-- 评论区 -->
            <div class="panel panel-default" id="comments">
                <div class="panel-heading">
                    <h3 class="panel-title">{$tran.post_comment}</h3>
                </div>
                <div class="panel-body">
                    <div class="row">
                        <div class="col-md-12" id="comment-area">
                            <!-- 评论框 -->
                            <form id="commentForm" style="position: relative;">
                                <div class="form-group">
                                    {if $article && $article.can_comment == 0}
                                    <textarea class="form-control" rows="3" name="comment" class="form-control" id="comment" placeholder="{$tran.comment_content}..."{if $setting.can_comment == 1 && !$login} disabled{/if} required></textarea>
                                    {/if}
                                    <!-- 未登录 -->
                                    {if $article && $article.can_comment == 0 && $setting.can_comment == 1 && !$login}
                                    <p style="position: absolute;top: 30%;margin-top: -1rem;left: 50%;margin-left: -8rem;">{$tran.please} [<a href="javascript:;" class="login" rel="nofollow" title="{$tran.login}">{$tran.login}</a>] {$tran.after_comment}</p>
                                    {/if}
                                    <!-- 未登录end -->
                                </div>
                                {if $article && $article.can_comment == 0}
                                <div class="form-group" style="position: relative;text-align: right;">
                                    <input type="hidden" name="post_id" value="{$article.id}" />
                                    <input type="hidden" name="pid" value="0">
                                    {if $login && in_array(88, $login['auth_ids'])}
                                    <input type="hidden" name="can_delete" value="1">
                                    {else}
                                    <input type="hidden" name="can_delete" value="0">
                                    {/if}
                                    <button type="submit" class="btn btn-primary">
                                        <span class="glyphicon glyphicon-send" aria-hidden="true"></span> {$tran.post_comment}
                                    </button>
                                    <span class="tips" style="position: absolute;left: 0;top: .5rem;"></span>
                                </div>
                                {/if}
                            </form>

                            <!-- 评论列表 -->
                            {if $main.comments}
                            {foreach from="$main.comments" item="item"}
                            <div class="panel panel-default" id="comment-{$item.id}">
                                <div class="panel-body">
                                    <!-- 媒体对象 -->
                                    <div class="media">
                                        <div class="media-left">
                                            <img class="media-object img-circle avatar"
                                                style="width: 64px;height: 64px;background-color: #f1f1f1;"
                                                src="{if (isset($setting['cdn_speed']) && $setting.cdn_speed == '1') || !$item.cover}{else}{$item.avatar}{/if}"
                                                data-src="{if $item.avatar}{$item.avatar}{else}{/if}"
                                                alt="{$item.nickname|strip_tags}"
                                                title="{$item.nickname|strip_tags}" />
                                        </div>
                                        <div class="media-body">
                                            <h4 class="media-heading"><strong>{if $item.nickname}{$item.nickname}{else}anonymous{/if}</strong> <cite>{$tran.say}：</cite></h4>
                                            <!-- 评论内容 -->
                                            {$item.comment} {if $login && in_array(88, $login['auth_ids'])}（<a href="javascript:;" class="delete-comment text-danger" data-id="{$item.id}" title="{$tran.delete}">{$tran.delete}</a>）{/if}
                                            <div class="clearfix" style="margin: 10px 0;">
                                                <button type="button" data-id="{$item.id}" class="pull-right btn btn-success btn-reply btn-sm media-right">
                                                    <span class="glyphicon glyphicon-share-alt" aria-hidden="true"></span> {$tran.reply}
                                                </button>
                                            </div>
                                            <!-- 回复列表 -->
                                            {foreach from="$item.replies" item="reply" name="reply"}
                                            <div class="media{if $smarty.foreach.reply.index > 4} hidden{/if}" id="comment-{$reply.id}">
                                                <hr style="margin-top: 10px;" />
                                                <div class="media-left">
                                                    <img class="media-object img-circle avatar"
                                                        style="width: 64px;height: 64px;background-color: #f1f1f1;"
                                                        src="{if (isset($setting['cdn_speed']) && $setting.cdn_speed == '1') || !$item.cover}{else}{$reply.avatar}{/if}"
                                                        data-src="{if $reply.avatar}{$reply.avatar}{else}{/if}"
                                                        alt="{$reply.nickname|strip_tags}"
                                                        title="{$reply.nickname|strip_tags}" />
                                                </div>
                                                <div class="media-body">
                                                    <h4 class="media-heading">{$reply.nickname} {$tran.reply}：</h4>
                                                    {$reply.comment} {if $login && in_array(88, $login['auth_ids'])}（<a href="javascript:;" class="delete-comment text-danger" data-id="{$reply.id}" title="{$tran.delete}">{$tran.delete}</a>）{/if}
                                                </div>
                                            </div>
                                            <!-- 回复分页 -->
                                            {if $smarty.foreach.reply.last && $smarty.foreach.reply.index > 4}
                                            <nav aria-label="Page navigation">
                                                <hr />
                                                <ul class="pager" data-index="0">
                                                    <li class="disabled" data-type="prev"><a href="javascript:;" title="Previous">Previous</a></li>
                                                    <li data-type="next"><a href="javascript:;" title="Next">Next</a></li>
                                                    <li data-type="all"><a href="javascript:;" title="All">All</a></li>
                                                </ul>
                                            </nav>
                                            {/if}
                                            <!-- 回复分页end -->
                                            {/foreach}
                                            <!-- 回复列表end -->
                                        </div>
                                    </div>
                                    <!-- 媒体对象End -->
                                </div>
                            </div>
                            {/foreach}
                            {else}
                            <p class="text-center text-muted no-comment">{$tran.no_comment}</p>
                            {/if}
                        </div>
                    </div>

                    <!-- 评论分页 -->
                    {if $article && $article.can_comment == 0}
                    {include file='index/inc/pager.html'}
                    {/if}

                </div>
            </div>
            <!-- 评论区end -->
        </div>

        <!-- 右侧侧栏 -->
        {include file='index/sidebar.html'}

    </div>
</div>

{include file='index/footer.html'}